<template>
  <div>
    <el-button type="primary" @click="openForm">新建</el-button>
    <el-table :data="tableData" border>
      <el-table-column label="#" type="index" width="80" />
      <el-table-column label="字典编码" prop="type_code" />
      <el-table-column label="字典名称" prop="type_name" />
      <el-table-column label="字典备注" prop="remark" showOverflowTooltip />
      <el-table-column label="创建人" prop="create_by" />
      <el-table-column label="修改人" prop="update_by" />
      <el-table-column label="操作">
         <template #default="scope">
          <el-button type="text" @click="delItem(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pageBox v-if="total" :total="total" :pageData="pageData" @pageSizeChange="pageSizeChange" @pageChange="pageChange" />
    <dialogForm ref="dialogFormRef" @upload="getData" />
  </div>
</template>

<script lang="ts">
import { getPageList, del } from '@/api/dictType'
import pageBox from '@/components/pageBox.vue'
import dialogForm from './dialogForm.vue';
  export default {
    components: {
      pageBox,
      dialogForm
    },
    data() {
      return {
        tableData: [],
        pageData: {
          page: 1,
          pageSize: 10
        },
        total: 0
      }
    },
    created() {
      this.getData();
    },
    methods: {
      getData() {
        getPageList(this.pageData).then(res => {
          this.tableData = res.data.rows
          this.total = res.data.total
        })
      },
      pageSizeChange(pageSize: number) {
        this.pageData.pageSize = pageSize
        this.pageData.page = 1;
        this.getData() // 请求数据
      },
      pageChange(page: number) {
        this.pageData.page = page
        this.getData() // 请求数据
      },
      openForm(data: any) {
        const dialogFormRef = this.$refs.dialogFormRef as any
        dialogFormRef.open(data)
      },
      async delItem(row: any) {
        await del({ ids: [row.id]})
        this.getData()
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>